<template>
	<view class="page page-store">
		<view class="swiper-wrap" v-if="swiperList.length">
			<swiper style="height: 100%;" circular :indicator-dots="true" :autoplay="true">
				<swiper-item v-for="(v,k) in swiperList" :key="k">
					<image class="h-full w-full" :src="v.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<view p-15px flex items-center>
			<view class="logo">
				<image v-if="firm.logo" mode="aspectFill" :src="firm.logo"></image>
				<view v-else class="icon icon-enterprise-logo"></view>
			</view>
			<view text-lg pl-10px fw-600>{{ firm.firm_name }}</view>
		</view>
		<view px-15px pb-20px v-if="firm.company_intro">{{ firm.company_intro }}</view>

		<view flex text-base px-15px pb-15px>
			<view pr-15px c-gray-5>公司地址</view> <view flex-1>{{ firm.firm_address }}</view>
		</view>

		<view class="main-product" v-if="firm.prdoucts?.length">
			<view class="product-item" v-for="v in list" :key="v.goods_id" @click="goProduct(v.goods_id)">
				<image class="image" :src="v.image_thumb" mode="aspectFill" />
				<view truncate text-base px-10px pb-10px>{{v.name}}</view>
			</view>
		</view>

		<divider height="5px"></divider>

		<view class="overflow-auto" pt-5px mb-5px>
			<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#0041a5" @clickItem="onTabsClick" />
		</view>

		<template v-if="!current">
			<view class="goods-list p-15px" v-if="list.length">
				<view class="goods-item  pb-10px" v-for="v in list" :key="v.goods_id" @click="goProduct(v.goods_id)">
					<image class="image" :src="v.image_thumb" mode="aspectFill" />
					<view text-base px-10px pb-10px>{{v.name}}</view>
				</view>
			</view>
			<view v-else flex items-center justify-center flex-col py-30px color-gray>
				<view class="icon icon-nodata text-8xl"></view>
				<view pt-10px>暂无数据</view>
			</view>
		</template>

		<template v-else>
			<view text-lg fw-600 p-15px>工商信息</view>
			<view flex pb-15px text-base px-15px v-if="firm.credit_code">
				<view pr-15px c-gray-5>信用代码</view> <view flex-1>{{ firm.credit_code }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="firm.firm_boss">
				<view pr-15px c-gray-5>企业法人</view> <view flex-1>{{ firm.firm_boss }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="firm.credit_code">
				<view pr-15px c-gray-5>注册资金</view> <view flex-1>{{ firm.credit_code }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="firm.established_time">
				<view pr-15px c-gray-5>成立时间</view> <view flex-1>{{ firm.established_time }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="firm.business_scope">
				<view pr-15px c-gray-5>经营范围</view> <view flex-1>{{ firm.business_scope }}</view>
			</view>


			<view text-lg fw-600 p-15px>联系方式</view>
			<uni-group :title="firm.contact_person" mode="card">
				<view class="phone-wrap" @click="phoneCall">
					<view text-xl class="icon icon-tel"></view>
				</view>
				<view flex pb-15px text-base v-if="firm.contact_email">
					<view pr-15px c-gray-5>邮箱</view> <view flex-1>{{ firm.contact_email }}</view>
				</view>
				<view flex pb-5px text-base v-if="firm.contact_address">
					<view pr-15px c-gray-5>地址</view> <view flex-1>{{ firm.contact_address }}</view>
				</view>
			</uni-group>

			<view text-lg fw-600 p-15px v-if="firm.website">官网</view>
			<view flex pb-15px text-base px-15px v-if="firm.website">
				<view pr-15px c-gray-5>官网</view> <view flex-1>{{ firm.website }}</view>
			</view>

			<view text-lg fw-600 p-15px>生产信息</view>
			<view flex pb-15px text-base px-15px v-if="firm.production_number">
				<view pr-15px c-gray-5>生产人数</view> <view flex-1>{{ firm.production_number }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="firm.develop_number">
				<view pr-15px c-gray-5>研发人数</view> <view flex-1>{{ firm.develop_number }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="firm.production_base">
				<view pr-15px c-gray-5>生产基地</view> <view flex-1>{{ firm.production_base }}</view>
			</view>
			<view flex pb-15px text-base px-15px v-if="firm.principal_market">
				<view pr-15px c-gray-5>主要市场</view> <view flex-1>{{ firm.principal_market }}</view>
			</view>
			<view pb-15px text-base px-15px v-if="firm.business_license">
				<view pr-15px c-gray-5 pb-10px>资质证明</view> 
				<image w-full :src="firm.business_license" mode="widthFix" />
			</view>
		</template>

		<view class="bottoms">
			<view text-center w-3_sl_20 @click="go('index')">
				<view class="icon icon-home text-2xl"></view>
				<view>主页</view>
			</view>
			<button w-3_sl_20 class="open-type-button" open-type="share">
				<view class="icon icon-share text-2xl"></view>
				<view>分享</view>
			</button>

			<view class="btns">
				<view class="left" @click="doConsult">咨询客服</view>
				<view class="right" @click="phoneCall">打电话</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { makePhoneCall, consult } from '@/common/utils'
	import { onShareAppMessage } from "@dcloudio/uni-app"

	const {id} = defineProps({
		id: String
	})

	const info = ref({})
	const firm = ref({})

	const page_no = ref(1) 
	const page_size = ref(100) 
	const swiperList = ref([])
	const loadedAll = ref(false)
	const list = ref([])

	async function getInfo() {
		swiperList.value = await api.storeBanner({ shop_id: id })
		info.value = await api.storeInfo({ shop_id: id })
		firm.value = info.value.firm
		getList()
	}
	getInfo()


	async function getList() {
		if(loadedAll.value) return
		const data = await api.goodsList({
			page_size: page_size.value,
			page_no: page_no.value,
			shop_id: id
		})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
	}

	const tabs = ['产品','店铺档案']
	const current = ref(0)
	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
	}

	const phoneCall = () => {
		makePhoneCall({
			phone: firm.value.contact_phone,
			source: 'shop',
			id: info.value.shop_id
		})
	}

	const doConsult = () => {
		consult({ 
			source: 'shop',
			id: info.value.shop_id,
		})
	}
	
	const goProduct = id => {
		if(!id) return
		uni.navigateTo({
			url: `/pages/product/detail?id=${id}`
		})
	}

	onShareAppMessage(() => {
		return {
			title: '店铺详情',
			path: `/pages/store/detail?id=${id}`
		}
	})

</script>

<style lang="scss">
.page-store {

	.uni-card__header .uni-card__header-avatar {
		border-radius: 100px;
		.uni-card__header-avatar-image {
			scale: 1.5;
		}
	}

	.uni-group--card {
		position: relative;
	}
	.uni-group__title {
		background-color: $uni-color-navigator;
	}
	.uni-group__title-text {
		color: white;
		font-size: 30upx;
	}
	.phone-wrap {
		color: white;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 2;
		padding: 6px 20px;
	}

	.swiper-wrap {
		aspect-ratio: 16/9;
	}

	.logo {
		width: 120upx;
		height: 120upx;
		font-size: 120upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}


	.main-product {
		overflow-x: scroll;
		padding: 15px;
		white-space: nowrap;
		.product-item {
			display: inline-block;
			width: 240upx;
			margin-right: 20upx;
			vertical-align: top;
		}

		.image {
			width: 100%;
			height: auto;
			aspect-ratio: 3/4;
		}

	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		.goods-item {
			width: 48%;
			.image {
				aspect-ratio: 3/4;
				width: 100%;
				height: auto;
			}
		}
	}

	.bottoms {
		position: fixed;
		width: 100%;
		padding: 0 2%;
		height: 120upx;
		left: 0;
		bottom: 0;
		z-index: 9;
		background: white;
		box-shadow: 0 0 4px 0 grey;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		.btns {
			margin-left: 3%;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36upx;
			color: white;
		}
		.left {
			flex:1;
			background-color: $uni-color-blue-light;
			color: $uni-color-blue;
			border-radius: 100px 0 0 100px;
			padding: 10px 0;
			text-align: center;
		}
		.right {
			flex:1;
			background-color: $uni-color-navigator;
			border-radius:  0 100px 100px 0 ;
			padding: 10px 0;
			text-align: center;
		}
	}
}
</style>